
<div class="layui-form layui-row layui-col-space4 form-#(api.id??)">
	<div class="layui-col-xs12 layui-col-sm2 layui-col-md1 requestMode">
   		<select id="requestMode_#(api.id??)" name="requestMode" class=" status" #(api.type=='demo'?'disabled ':'') lay-filter="requestMode#(api.id??)" style="width:10%">
         <option value="GET" #if(api.request_mode??=='GET') selected="selected" #end>GET</option>
         <option value="POST" #if(api.request_mode??=='POST') selected="selected" #end>POST</option>
         <option value="PULL" #if(api.request_mode??=='PULL') selected="selected" #end>PULL</option>
         <option value="DEL" #if(api.request_mode??=='DELETE') selected="selected" #end>DELETE</option>
         <option value="HEAD" #if(api.request_mode??=='HEAD') selected="selected" #end>HEAD</option>
         <option value="CONNECT" #if(api.request_mode??=='CONNECT') selected="selected" #end>CONNECT</option>
         <option value="OPT" #if(api.request_mode??=='OPTIONS') selected="selected" #end>OPTIONS</option>
         <option value="TRACE" #if(api.request_mode??=='TRACE') selected="selected" #end>TRACE<option>
         <option value="PATCH" #if(api.request_mode??=='PATCH') selected="selected" #end>PATCH</option>
     </select>
  </div>
  <div class="layui-col-xs12 layui-col-sm10 layui-col-md11">
	  <div style="width:calc(100% - 225px)">
		  <input id="requestUrl_#(api.id??)" type="text" name="requestUrl"
		   oninput="createQueryDataRow('#(api.id??)');requestUrlHeader(this,'#(api.id??)')" onporpertychange="createQueryDataRow('#(api.id??)')" 
		  placeholder="#(api.type=='link'?'输入 http 或 https 起始的完整 URL':'接口路径 “/”起始')" class="layui-input" value="#(api.request_url??)">
		  <span  id="requestUrl_tips_#(api.id??)" class="request-url-span">#(api.type=='link'?'输入 http 或 https 起始的完整 URL':'接口路径 “/”起始')</span>
	 </div>
	  <div style="width:220px;position:absolute;margin-left:calc(100% - 225px);margin-top:-31px">
		  <button type="button" onclick="sendRequest('#(api.id??)')" class="layui-btn layui-btn-sm layui-bg-green send-#(api.id??)" style="width:80px;">发送</button>
		  <div class="layui-input-group" style="position: absolute;margin-left: 85px;margin-top: -30px;">
	  	  	  <button type="button" onclick="saveApi#(api.id??)('#(api.id??)',null)" class="layui-btn layui-btn-sm layui-btn-primary save-#(api.id??)">保存</button>
		  	  <div class="layui-input-split layui-input-suffix save-suffix-#(api.id??) #(api.type=='demo'||api.is_add?'layui-hide':'')" style="cursor: pointer;" lay-on="save-#(api.type??)-#(api.id??)">
		        <i class="layui-icon layui-icon-down"></i>
		      </div>
	      </div>
	  	  <button type="button" class="layui-btn layui-btn-sm layui-btn-primary delete-#(api.id??) #(api.is_add?'layui-hide':'')" style="position: absolute;margin-left: 93px;" lay-on="delete-#(api.id??)">
	  	  		<i class="layui-icon layui-icon-more"></i>
	  	  </button>
	  </div>
	</div>
    <hr class="ws-space-2">
</div>

<!-- 任意自定义的 tab 元素 -->
<div class="api-tab-header layui-btn-xs layui-btn-container" id="apiTabHeader#(api.id??)" style="#(api.type=='demo'||api.type=='link'? 'width:120px;background-color:transparent' : '')">
  <button class="layui-btn layui-btn-xs layui-btn-primary  layui-btn-radius layui-this">请求</button>
  <button class="layui-btn layui-btn-xs layui-btn-primary  layui-btn-radius">响应示例</button>
  <button class="layui-btn layui-btn-xs layui-btn-primary  layui-btn-radius #(api.type=='demo'||api.type=='link'?'layui-hide':'')">接口说明</button>
  <button class="layui-btn layui-btn-xs layui-btn-primary  layui-btn-radius #(api.type=='demo'||api.type=='link'?'layui-hide':'')">文档预览</button>
</div>
<div style="position: absolute;margin-left: #(api.type=='demo'||api.type=='link'?'140px':'280px');margin-top:-23px;">
	<a onclick="apiDetail('#(api.parent_id??)','<span class=&quot;#(api.request_mode??)&quot;>#(api.request_mode??)</span>#(api.parent_name??)')" style="color:#8276c9">#(api.type=='demo'?api.parent_name+' # ':'')</a>
	<input id="title_input_#(api.id??)" oninput="titleInputHeader(this,'#(api.id??)')" title="#(api.type=='demo'?'用例':'接口')名称" placeholder="#(api.type=='demo'?'用例':'接口')名称" name="title" class="title-input" autocomplete="off" value="#(api.title??api.action_key)"/>
	<span  id="title_input_tips_#(api.id??)" style="color:red;display:none">请输入#(api.type=='demo'?'用例':'接口')名称</span>
</div>
<div class="api-tab-body resizable-row" id="apiTabBody#(api.id??)" style="overflow-y: auto;overflow-x:hidden;border-bottom:1px solid #d2d2d26b;">
  <!-- 请求参数 -->
  	<div class="layui-show">
	  	<div class="layui-tab layui-tab-brief">
		  <ul class="layui-tab-title param-header">
		    <li class="layui-this">Params</li>
		    <li>Body</li>
		    <li>Headers</li>
		    <li>Cookies</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
		    	<div class="add-row"> Query 参数 <a  onclick="addQueryDataRow(true,'','','','','','#(api.id??)')"><i class="layui-icon layui-icon-add-circle"></i>增加一行</a></div>
		    	<table>
                    <tbody id="query_data_list_#(api.id??)">
                        <tr>
                        	<td class="move-row"><input type="checkbox" class="" lay-ignore  name="disable" value="" checked/></td>
                            <td><input type="text" class="form-data-param input-max" oninput="appendParaUrl('#(api.id??)')" onporpertychange="appendParaUrl('#(api.id??)')" name="name" value="" placeholder="参数名"/></td>
                            <td class="td-min">
                                <select name="type" class="form-data-param input-max" lay-ignore>
                                    <option value="string">string</option>
                                    <option value="number">number</option>
                                    <option value="int">int</option>
                                    <option value="long">long</option>
                                    <option value="date">date</option>
                                    <option value="boolean">boolean</option>
                                </select>
                            </td>
                            <td><input type="text" class="form-data-param input-max" oninput="appendParaUrl('#(api.id??)')" onporpertychange="appendParaUrl('#(api.id??)')" name="value" value="" placeholder="参数值"/></td>
                            <td class="td-min">
                                <select name="require" class="form-data-param input-max" lay-ignore>
                                    <option value="1">必填</option>
                                    <option value="0">选填</option>
                                </select>
                            </td>
                            <td><input type="text" class="form-data-param input-max"  name="remark" value="" placeholder="选填。参数描述，便于生成文档"/></td>
                            <td class="td-btn">
                                <button class="add-tr-btn" onclick="addTr(this)" type="button"><i class="layui-icon layui-icon-addition"></i></button>
                             	<button class="remove-btn" onclick="removeTr(this)" type="button"><i class="layui-icon layui-icon-subtraction"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="add-row path-data-#(api.id??) layui-hide"> Path 参数</div>
                 <table>
                    <tbody id="path_data_list_#(api.id??)">
                    </tbody>
                </table>
		    </div>
		    <div class="layui-tab-item">
	                <input id="body_type_#(api.id??)" type="hidden" value="#(api.request_body_type??)">
	                <div class="layui-form" lay-filter="form-demo-skin" style="padding:3px">
					    <input type="radio" name="requestBodyType" value="none" lay-filter="body_type_#(api.id??)" lay-skin="none" #if(api.request_body_type??=='none') checked #end>
					    <div lay-radio class="lay-skin-tag layui-badge">none</div>
					    <input type="radio" name="requestBodyType" value="form-data" lay-filter="body_type_#(api.id??)" lay-skin="none" #if(api.request_body_type??=='form-data') checked #end>
					    <div lay-radio class="lay-skin-tag layui-badge">form-data</div>
					    <input type="radio" name="requestBodyType" value="x-www-form-urlencoded" lay-filter="body_type_#(api.id??)" lay-skin="none" #if(api.request_body_type??=='x-www-form-urlencoded') checked #end>
					    <div lay-radio class="lay-skin-tag layui-badge">x-www-form-urlencoded</div>
					    <input type="radio" name="requestBodyType" value="json" lay-filter="body_type_#(api.id??)" lay-skin="none" #if(api.request_body_type??=='json') checked #end>
					    <div lay-radio class="lay-skin-tag layui-badge">json</div>
					    <input type="radio" name="requestBodyType" value="raw" lay-filter="body_type_#(api.id??)" lay-skin="none" #if(api.request_body_type??=='raw') checked #end>
					    <div lay-radio class="lay-skin-tag layui-badge">raw</div>
					    <input type="radio" name="requestBodyType" value="xml" lay-filter="body_type_#(api.id??)" lay-skin="none" #if(api.request_body_type??=='xml') checked #end>
					    <div lay-radio class="lay-skin-tag layui-badge">xml</div>
				  </div>

	                  <div class="body-none body-none-#(api.id??) layui-hide">该请求没有 Body 体</div>                      
                      <div class="body-type-json-#(api.id??) layui-hide">
                          <textarea id="bodyJson_#(api.id??)" name="bodyJson" class="layui-textarea">#(api.request_body??)</textarea>
                          <p><span>json字段说明</span>
	                          <a id="formatBodyJson_#(api.id??)" onclick="formatBodyJson('#(api.id??)')" class="body-type-json-#(api.id??) json-format layui-hide">
                          		<i class="layui-icon layui-icon-download-circle"></i>json美化</a>
	                          <a id="createBodyPara_#(api.id??)" onclick="createBodyPara('#(api.id??)')" class="json-format">
	                              <i class="layui-icon layui-icon-download-circle"></i>生成字段</a>
	                          <a class="add-row body-type-json-#(api.id??) layui-hide json-format" onclick="addBodyDataRow('','','','','#(api.id??)')">
	                          	<i class="layui-icon layui-icon-add-circle"></i>增加一行</a>
                      	 </p>
                      </div>
                      
                      <div class="layui-row task-row body-type-form-data">
                          <table class="body-type-json-#(api.id??) layui-hide">
                              <tbody id="body_data_list_#(api.id??)">
                              </tbody>
                          </table>
                          <table>
                              <tbody id="form_data_list_#(api.id??)" class="form-data-#(api.id??)">
                                <tr>
                                    <td class="move-row"><input type="checkbox" class="" lay-ignore  name="disable" value="" checked/></td>
                                    <td><input type="text" class="form-data-param input-max"  name="name" value="" placeholder="参数名"/></td>
                                    <td class="td-min">
                                        <select name="type" class="form-data-param input-max" lay-ignore>
                                            <option value="string">string</option>
                                            <option value="number">number</option>
                                            <option value="file">file</option>
                                            <option value="array">array</option>
                                            <option value="object">object</option>
                                            <option value="int">int</option>
                                            <option value="long">long</option>
                                            <option value="date">date</option>
                                            <option value="boolean">boolean</option>
                                        </select>
                                    </td>
                                    <td><input type="text" class="form-data-param input-max"  name="value" value="" placeholder="参数值"/></td>
                                    <td class="td-min">
                                        <select name="require" class="form-data-param input-max" lay-ignore>
                                            <option value="1">必填</option>
                                            <option value="0">选填</option>
                                        </select>
                                    </td>
                                    <td><input type="text" class="form-data-param input-max"  name="remark" value="" placeholder="选填。参数描述，便于生成文档"/></td>
		                            <td class="td-btn">
		                                <button class="add-tr-btn" onclick="addTr(this)" type="button"><i class="layui-icon layui-icon-addition"></i></button>
		                             	<button class="remove-btn" onclick="removeTr(this)" type="button"><i class="layui-icon layui-icon-subtraction"></i></button>
		                            </td>
                                </tr>
                              </tbody>
                          </table>
                          <div class="add-row form-data-#(api.id??)">
                              <a onclick="addFormDataRow(true,'','','','','','#(api.id??)')"><i class="layui-icon layui-icon-add-circle"></i>增加一行</a>
                              ###<a onclick="layer.msg('待实现功能，主要是导入导出接口json参数')"><i class="layui-icon layui-icon-util"></i>参数工具</a>
                          </div>
                      </div>
		    </div>
		    <div class="layui-tab-item">
		    	<table>
                          <tbody id="headers_data_list_#(api.id??)">
                              <tr>
                                  <td><input type="checkbox" class="" lay-ignore  name="disable" value="" checked/></td>
                                  <td><input type="text" class="form-data-param input-max"  name="name" value="" placeholder="Headers名"/></td>
                                  <td class="td-min">
                                      <select name="type" class="form-data-param input-max" lay-ignore>
                                          <option value="string">string</option>
                                          <option value="number">number</option>
                                      </select>
                                  </td>
                                  <td><input type="text" class="form-data-param input-max"  name="value" value="" placeholder="Headers值"/></td>
                                  <td class="td-min">
                                      <select name="require" class="form-data-param input-max" lay-ignore>
                                          <option value="1">必填</option>
                                          <option value="0">选填</option>
                                      </select>
                                  </td>
                                  <td><input type="text" class="form-data-param input-max"  name="remark" value="" placeholder="选填。Headers描述，便于生成文档"/></td>
		                            <td class="td-btn">
		                                <button class="add-tr-btn" onclick="addTr(this)" type="button"><i class="layui-icon layui-icon-addition"></i></button>
		                             	<button class="remove-btn" onclick="removeTr(this)" type="button"><i class="layui-icon layui-icon-subtraction"></i></button>
		                            </td>
                              </tr>
                          </tbody>
                      </table>
                      <div class="add-row">
                          <a onclick="addHeadersDataRow(true,'','','','','','#(api.id??)')"><i class="layui-icon layui-icon-add-circle"></i>增加一行</a>
                          ###<a onclick="layer.msg('待实现功能，主要是导入导出接口json参数')"><i class="layui-icon layui-icon-util"></i>参数工具</a>
                      </div>
		    </div>
		    <div class="layui-tab-item">
		    	<table id="cookies_data_table_#(api.id??)">
                          <tbody id="cookies_data_list_#(api.id??)">
                              <tr>
                                  <td><input type="text" class="form-data-param input-max"  name="name" value="" placeholder="cookies名"/></td>
                                  <td><input type="text" class="form-data-param input-max"  name="value" value="" placeholder="cookies值"/></td>
		                            <td class="td-btn">
		                                <button class="add-tr-btn" onclick="addTr(this)" type="button"><i class="layui-icon layui-icon-addition"></i></button>
		                             	<button class="remove-btn" onclick="removeTr(this)" type="button"><i class="layui-icon layui-icon-subtraction"></i></button>
		                            </td>
                              </tr>
                          </tbody>
                      </table>
                      <div class="add-row">
                          <a onclick="addCookiesDataRow('#(api.id??)')"><i class="layui-icon layui-icon-add-circle"></i>增加一行</a>
                      </div>
		    </div>
		    <div class="layui-tab-item">内容-5</div>
		  </div>
		</div>
  	
  </div>
  <!-- 响应示例 -->
  <div>
  		<!-- 响应体 -->
  		<div class="layui-row layui-col-space1 task-row ">

          <div class="layui-tab layui-tab-brief">
              <ul class="layui-tab-title menu-tab">
                  <li class="layui-this">成功返回示例</li>
                  <li>失败返回示例</li>
                  <li>描述</li>
                  <li>备注</li>
              </ul>
              <div class="layui-tab-content" style="height: auto;">
                  <!--成功返回示例 -->
                  <div class="layui-tab-item layui-show">
                  	 <p>
                      <a id="copySuccessJson_#(api.id??)" onclick="copySuccessJson('#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-templeate-1"></i>复制到这里</a>
                      <a id="formatSuccessJson_#(api.id??)" onclick="formatSuccessJson('#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-download-circle"></i>json美化</a>
                    </p>
                      <div class="success-data-json" >
                          <textarea id="successDataJson_#(api.id??)" name="successDataJson" class="layui-textarea">#(api.success_demo??)</textarea>
                      </div>
                      
                      <p><span>返回参数说明</span>
                      <a id="createSuccessPara_#(api.id??)" onclick="createSuccessPara('#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-download-circle"></i>极速生成</a>
                      <a class="json-format" onclick="addSuccessDataRow('','','','#(api.id??)')"><i class="layui-icon layui-icon-add-circle"></i>增加一行</a>
                      <a id="removeSuccessPara_#(api.id??)" onclick="removeTrAll('success_data_list_#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-delete"></i>一键清空</a>
                      </p>
                      
                      <table>
                          <tbody id="success_data_list_#(api.id??)">
                              <tr>
                                  <td class="move-row"><i class="layui-icon layui-icon-template-1" title="可拖动排序"></i></td>
                                  <td><input type="text" class="form-data-param input-max"  name="name" value="" placeholder="参数名"/></td>
                                  <td class="td-min">
                                      <select name="type" class="form-data-param input-max" lay-ignore>
                                          <option value="string">string</option>
                                          <option value="number">number</option>
                                          <option value="array">array</option>
                                          <option value="object">object</option>
                                          <option value="int">int</option>
                                          <option value="long">long</option>
                                          <option value="date">date</option>
                                          <option value="boolean">boolean</option>
                                      </select>
                                  </td>
                                  <td><input type="text" class="form-data-param input-max"  name="remark" value="" placeholder="选填。参数描述，便于生成文档"/></td>
		                            <td class="td-btn">
		                                <button class="add-tr-btn" onclick="addTr(this)" type="button"><i class="layui-icon layui-icon-addition"></i></button>
		                             	<button class="remove-btn" onclick="removeTr(this)" type="button"><i class="layui-icon layui-icon-subtraction"></i></button>
		                            </td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
                  <!--失败返回示例 -->
                  <div class="layui-tab-item">
                  	<p>
                      <a id="copyFailuerJson_#(api.id??)" onclick="copyFailuerJson('#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-templeate-1"></i>复制到这里</a>
                      <a id="formatFailuerJson_#(api.id??)" onclick="formatFailuerJson('#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-download-circle"></i>json美化</a>
                    </p>
                      <div class="failuer-data-json">
                          <textarea id="failuerDataJson_#(api.id??)" name="failuerDataJson" class="layui-textarea">#(api.failuer_demo??)</textarea>
                      </div>
                      
                      <p><span>返回参数说明</span>
	                      <a id="createFailuerPara_#(api.id??)" onclick="createFailuerPara('#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-download-circle"></i>极速生成</a>
	                      <a class="json-format" onclick="addFailuerDataRow('','','','#(api.id??)')"><i class="layui-icon layui-icon-add-circle"></i>增加一行</a>
	                      <a id="removeFailuerPara_#(api.id??)" onclick="removeTrAll('failuer_data_list_#(api.id??)')" class="json-format"><i class="layui-icon layui-icon-delete"></i>一键清空</a>
                      </p>
                      
                      <table>
                          <tbody id="failuer_data_list_#(api.id??)">
                              <tr>
                                  <td class="move-row"><i class="layui-icon layui-icon-template-1" title="可拖动排序"></i></td>
                                  <td><input type="text" class="form-data-param input-max"  name="name" value="" placeholder="参数名"/></td>
                                  <td class="td-min">
                                      <select name="type" class="form-data-param input-max" lay-ignore>
                                          <option value="string">string</option>
                                          <option value="number">number</option>
                                          <option value="array">array</option>
                                          <option value="object">object</option>
                                          <option value="int">int</option>
                                          <option value="long">long</option>
                                          <option value="date">date</option>
                                          <option value="boolean">boolean</option>
                                      </select>
                                  </td>
                                  <td><input type="text" class="form-data-param input-max"  name="remark" value="" placeholder="选填。参数描述，便于生成文档"/></td>
		                            <td class="td-btn">
		                                <button class="add-tr-btn" onclick="addTr(this)" type="button"><i class="layui-icon layui-icon-addition"></i></button>
		                             	<button class="remove-btn" onclick="removeTr(this)" type="button"><i class="layui-icon layui-icon-subtraction"></i></button>
		                            </td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
                  <!--描述 -->
                  <div class="layui-tab-item">
                      <textarea class="layui-textarea" id="description_#(api.id??)" name="description" placeholder="可选。描述信息，会自动生成到文档头部">#(api.description??)</textarea>
                  </div>
                  <!--备注 -->
                  <div class="layui-tab-item">
                      <textarea class="layui-textarea" id="requestRemark_#(api.id??)" name="requestRemark" placeholder="可选。备注信息，会自动生成到文档末尾">#(api.request_remark??)</textarea>
                  </div>
              </div>
          </div>
      </div>
  	<!-- 响应体 -->
  </div>

  <!-- 接口说明 -->
  <div>
		<div class="layui-row">
        	<div class="layui-col-xs12 layui-col-md6"> 
	        	 <div class="layui-form-item">
					    <label class="layui-form-label">接口状态</label>
					    <div class="layui-input-block">
					     	 <select id="interfaceStatus_#(api.id??)" name="interfaceStatus" class="layui-input" >
				                <option value="">---选择---</option>
				                <option value="开发中" #if(api.interface_status??=='开发中') selected="selected" #end>开发中</option>
				                <option value="测试中" #if(api.interface_status??=='测试中') selected="selected" #end>测试中</option>
				                <option value="已完成" #if(api.interface_status??=='已完成') selected="selected" #end>已完成</option>
				                <option value="需修改" #if(api.interface_status??=='需修改') selected="selected" #end>需修改</option>
				                <option value="已废弃" #if(api.interface_status??=='已废弃') selected="selected" #end>已废弃</option>
				            </select>
					    </div>
				 </div>
			</div>
		</div>
		<div class="layui-row">
	        	<div class="layui-col-xs12 layui-col-md6 layui-form"> 
		        	 <div class="layui-form-item">
						    <label class="layui-form-label">显示隐藏</label>
						    <div class="layui-input-block">
						     	  <input type="radio" name="visible#(api.id??)" value="0" title="隐藏" #if(api.visible==0) checked #end>
  								  <input type="radio" name="visible#(api.id??)" value="1" title="显示" #if(api.visible==1) checked #end> 
						    </div>
					 </div>
				</div>
			</div>
		<div class="layui-row">
	        	<div class="layui-col-xs12 layui-col-md6"> 
		        	 <div class="layui-form-item">
						    <label class="layui-form-label">父级目录</label>
						    <div class="layui-input-block">
						     	  <input type="hidden" id="treeSelect#(api.id??2)Id" name="parentId" value="#(api.parent_id??)"/>
      			                  <input type="text" id="treeSelect#(api.id??2)" name="parentName" value="#(api.parent_name??'根目录')"
      			                    class="layui-input" autocomplete="off" onblur="searchMenuBlur(this,'#(api.tree_type??1)')" 
      			                    placeholder="#(api.parent_name??'根目录')" oninput="searchMenu(this,'#(api.tree_type??1)')"/>  
						    </div>
					 </div>
				</div>
			</div>
			<div class="layui-row">
	        	<div class="layui-col-xs12 layui-col-md6"> 
		        	 <div class="layui-form-item">
						    <label class="layui-form-label">接口备注</label>
						    <div class="layui-input-block">
						     	  <textarea id="remark_#(api.id??)" placeholder="请输入内容" name="remark" class="layui-textarea">#(api.remark??)</textarea>
						    </div>
					 </div>
				</div>
			</div>
  </div>

  <!-- 文档预览 -->
  <div id="doc_review_#(api.id??)"></div>

</div>

<!-- 返回响应 -->
<div class="layui-row layui-col-space1 task-row resizable-row-#(api.id??)">
<div class="layui-collapse">
  <div class="layui-colla-item">
    <div class="layui-colla-title resopnse-title-#(api.id??)" style="padding-left:3px;" >
    	<span onclick="showAndHideResponse('#(api.id??)',true)">
    	<i class="layui-icon layui-icon-down title-icon-#(api.id??)"></i>&nbsp;返回响应</span>
		<span class="response-tab response-tab-#(api.id??) response-this" onclick="setActive(this,1,'#(api.id??)')">Body</span>
		<span class="response-tab response-tab-#(api.id??)" onclick="setActive(this,2,'#(api.id??)')">Header</span>
		<span class="response-tab response-tab-#(api.id??)" onclick="setActive(this,3,'#(api.id??)')">实际请求</span>
		<span id="response_info_#(api.id??)" class="response-info layui-hide">
			响应码：<span id="status_#(api.id??)" style="color:#11ab11;padding-right:10px;"></span>
			耗时：<span id="time_#(api.id??)" style="color:red;padding-right:10px;"></span>
			###大小：<span id="size_#(api.id??)" style="color:red;padding-right:10px;"></span>
		</span>
    </div>
    <div class="layui-colla-content response-row-#(api.id) " style="padding:0px;">
	      <div class="response-tab-content response-tab-content-#(api.id??) respones-tab-show" id="respones_content_1_#(api.id??)">
		      <div class="layui-tab layui-tab-brief">
		        <ul class="layui-tab-title menu-tab">
		            <li class="layui-this">美化</li>
		            <li>原生</li>
		            <li onclick="reviewData('#(api.id??)')">预览</li>                          
		        </ul>
		        <div class="layui-tab-content response-content" style="height:calc(100vh - 660px);padding:0px; ">
		            <!--美化-->
		            <div class="layui-tab-item layui-show" style="height:calc(100vh - 660px);overflow-x:hidden;overflow-y: auto;width:100%;">
		            	  <div id="responseBodyJson_#(api.id??)" ></div>
		                <textarea readonly class="layui-textarea" id="responseBody1_#(api.id??)" style="height:calc(100vh - 660px);resize: none;"></textarea>
		            </div>
		            <!--原生-->
		            <div class="layui-tab-item">
		                <textarea readonly class="layui-textarea" id="responseBody2_#(api.id??)" name="requestResult" style="height:calc(100vh - 660px);resize: none;">#(api.request_result??)</textarea>
		            </div>
		            <!--预览-->
		            <div class="layui-tab-item">
		                <iframe id="response_frame_#(api.id??)" srcdoc='<div id="responseBody3_#(api.id??)"></div>' width="100%" style="height:calc(100vh - 660px);"></iframe>
		            </div>
		        </div>
		    </div>
	      </div>
	      <div class="response-tab-content response-tab-content-#(api.id??)" id="respones_content_2_#(api.id??)">
	            <textarea readonly class="layui-textarea" id="responseHeaders_#(api.id??)" name="responseHeaders" style="height:calc(100vh - 660px);resize: none;">#(api.response_headers??)</textarea>
	      </div>
	      <div class="response-tab-content response-tab-content-#(api.id??)" id="respones_content_3_#(api.id??)">
	      	   <div class="request-msg" style="padding:15px;height:calc(100vh - 670px);overflow-x:hidden;overflow-y: auto;width:98%;">
		           <h3>请求url:</h3>
		           <div><span id="req_msg_method_#(api.id??)"></span>&nbsp;<span id="req_msg_url_#(api.id??)"></span></div>
		           <h3>Header:</h3>
		           <div >
		           <table class="layui-table">
						<colgroup>
						    <col width="250">
						    <col>
						  </colgroup>
						<thead>
		           			<tr>
		           				<th class="req-msg-header">名称</th>
				           		<th class="req-msg-header">值</th>
				           	</tr>
				          </thead>
		           		<tbody id="req_msg_header_#(api.id??)">
		           		</tbody>
		           	</table>
		           </div>
		           <h3>Body:</h3>
		           <div id="req_msg_body_#(api.id??)">
		           		<span>&nbsp;&nbsp;Body类型：</span><span id="req_msg_content_type_#(api.id??)"></span><br/>
		           		<textarea id="req_msg_body_json_#(api.id??)" style="height:150px;width:100%;resize: none;padding:10px;"></textarea>
		           </div>
	          </div>
	      </div>
    </div>
  </div>
</div>
</div>

<script>  
	//标记发送按钮是否被点击
	apiIdSendReq['#(api.id??)'] = false;
	// 标记点击时间次数
	apiClick['#(api.id??)'] = 0;
	
	 // 绑定自定义的 tab 元素
	layui.element.tab({
	    headerElem: '#apiTabHeader#(api.id??)>.layui-btn',
	    bodyElem: '#apiTabBody#(api.id??)>div'
	 });

	layui.form.render();

	// 代码预览组件
	layui.code({
	    elem: '.code-demo-#(api.id??)'
	  });
	  
	addBtnHover();
	
	getMenuTree('#treeSelect#(api.id??2)', '#(api.tree_type??)');
	
	
		
	// 获取 input 元素  
	  var titleInput = document.getElementById('title_input_#(api.id??)');  

	  // 设置 input 的宽度  
	 function setInputWidth() {  
	    // 获取 input 的值的长度  
	    var valueLength = titleInput.value.length;  

	    // 设置 input 的宽度  
	    titleInput.style.width = (valueLength *8 + 50) + 'px';  
	  }  

	  // 监听 input 的 input 事件,实时更新宽度  
	  titleInput.addEventListener('input', setInputWidth);  

	// 初次设置宽度  
	setInputWidth();  	
	
	    //移动表格行排序
	    moveTableTr("success_data_list_#(api.id??)");
	    
	    moveTableTr("failuer_data_list_#(api.id??)");
	    layui.form.on('select(requestMode#(api.id??))',function(data){
	        if(data.value=='GET'){
	    		$('#body_type_#(api.id??)').addClass('layui-hide');
	    		$('#getMsg_#(api.id??)').removeClass('layui-hide');
	    	}else{
	    		$('#body_type_#(api.id??)').removeClass('layui-hide');
	    		$('#getMsg_#(api.id??)').addClass('layui-hide');
	    	}
	        layui.form.render();
	    });
	    
	    layui.form.on('radio(body_type_#(api.id??))', function(data){
	        var elem = data.elem; // 获得 radio 原始 DOM 对象
	        var checked = elem.checked; // 获得 radio 选中状态
	        var value = elem.value; // 获得 radio 值
	        var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
	        
	        if(value == 'json' || value == 'raw' || value == 'xml'){
	            $('.body-type-json-#(api.id??)').removeClass('layui-hide');
	            $('.body-none-#(api.id??)').addClass('layui-hide');
	            $('.form-data-#(api.id??)').addClass('layui-hide');
	        }else if(value=='none'){
	        	$('.body-none-#(api.id??)').removeClass('layui-hide');
	        	$('.form-data-#(api.id??)').addClass('layui-hide');
	        	$('.body-type-json-#(api.id??)').addClass('layui-hide');
	        }else{
	        	$('.body-none-#(api.id??)').addClass('layui-hide');
	            $('.body-type-json-#(api.id??)').addClass('layui-hide');
	            $('.form-data-#(api.id??)').removeClass('layui-hide');
	        }
	        $("#body_type_#(api.id??)").val(value);
	    });
	    
		init();
	        
	function init(){
	    var bodyType='#(api.request_body_type??)';
	    if(bodyType=='json'){
	    	$('.body-type-json-#(api.id??)').removeClass('layui-hide');
	        $('.form-data-#(api.id??)').addClass('layui-hide');
	    }
	    //回显数据
	    var requestResult=$('#responseBody2_#(api.id??)').val();
		if(requestResult){
		    try{
			    var resJson=JSON.parse(requestResult);
			    $('#responseBodyJson_#(api.id??)').jsonViewer(resJson);
			    $('#responseBody1_#(api.id??)').hide();
			    $('#responseBody1_#(api.id??)').val(JSON.stringify(resJson,null,4));
			 }catch(e){
	    		$('#responseBody1_#(api.id??)').val(requestResult);
			}
		}
		var requestBodyExplain='#(api.request_body_explain??)';
		var requestFormData='#(api.request_form_data??)';
		var requestHeaders='#(api.request_headers??)';
		var requestParamExplain='#(api.request_param_explain??)';
		var requestPathExplain='#(api.request_path_explain??)';
		var successDemoExplain='#(api.success_demo_explain??)';
		var failuerDemoExplain='#(api.failuer_demo_explain??)';
		if(requestPathExplain && requestPathExplain!='[]'){
			$('.path-data-#(api.id??)').removeClass('layui-hide');
		}
		createTableRow('body_data_list_#(api.id??)',requestBodyExplain,'#(api.id??)');
		createTableRow('form_data_list_#(api.id??)',requestFormData,'#(api.id??)');
		createTableRow('headers_data_list_#(api.id??)',requestHeaders,'#(api.id??)');
		createTableRow('query_data_list_#(api.id??)',requestParamExplain,'#(api.id??)');
		createTableRow('path_data_list_#(api.id??)',requestPathExplain,'#(api.id??)');
		createTableRow('success_data_list_#(api.id??)',successDemoExplain,'#(api.id??)');
		createTableRow('failuer_data_list_#(api.id??)',failuerDemoExplain,'#(api.id??)');	

		// 初始化文档页
		getDoc('#(api.id??)');
	}

	var isAdd = "#(api.is_add??false)";
	//保存接口参数
	function saveApi#(api.id??)(apiId,demoTitle,saveType,selectParentId){
	    var id="#(api.id??)";
	    var actionKey="#(api.action_key??)";
	    var controller="#(api.controller??)";
		var remark="#(api.remark??)";
		var type = "#(api.type??)";
		var treeType = '#(api.tree_type??)';
		var title=$('#title_input_#(api.id??)').val();
		var parentId = $('#treeSelect#(api.id??2)Id').val();
		var requestUrl=$('#requestUrl_#(api.id??)').val();
		// 快捷请求
		if(requestUrl==''){
			$('#requestUrl_tips_#(api.id??)').show();
			return;
		}
		// 保存为用例或者接口
		if(demoTitle){
			title = demoTitle;
			isAdd = true;
			type = saveType;
			id = null;
			if(saveType=='demo'){
				parentId = apiId;
			} else if(saveType=='api'){
				parentId = selectParentId;
				actionKey = requestUrl; 
				treeType = "1";
			}
		}
		if(title==''){
			$('#title_input_tips_#(api.id??)').show();
			return;
		}
			
		var description=$('#description_#(api.id??)').val();
		var requestMode=$('#requestMode_#(api.id??)').val();
		var requestHeaders=getTableJson('headers_data_list_#(api.id??)');
		var requestParam=requestUrl.split("?")[1]||'';
		var requestParamExplain=getTableJson('query_data_list_#(api.id??)');
		var requestPathExplain=getTableJson('path_data_list_#(api.id??)');
		var requestResult=$('#responseBody2_#(api.id??)').val();
		var requestBody=$('#bodyJson_#(api.id??)').val();
		var requestBodyExplain=getTableJson('body_data_list_#(api.id??)');
		var requestFormData=getTableJson('form_data_list_#(api.id??)');
		var successDemo=$('#successDataJson_#(api.id??)').val();
		var successDemoExplain=getTableJson('success_data_list_#(api.id??)');
		var failuerDemo=$('#failuerDataJson_#(api.id??)').val();
		var failuerDemoExplain=getTableJson('failuer_data_list_#(api.id??)');
		var requestRemark=$('#requestRemark_#(api.id??)').val();
		var interfaceStatus=$('#interfaceStatus_#(api.id??)').val();
		var requestBodyType=$('#body_type_#(api.id??)').val();
		var responseHeaders=$('#responseHeaders_#(api.id??)').val();
		var visible=$('input[name=visible#(api.id??)]:checked').val();
	    var formData={};
		formData['id']=id;
		formData['action_key']=actionKey;
		formData['controller']=controller;
		formData['remark']=remark;
		formData['title']=title;
		formData['description']=description;
		formData['request_url']=requestUrl;
		formData['request_mode']=requestMode;
		formData['request_headers']=requestHeaders;
		formData['request_param']=requestParam;
		formData['request_param_explain']=requestParamExplain;
		formData['request_path_explain']=requestPathExplain;
		formData['request_result']=requestResult;
		formData['request_body']=requestBody;
		formData['request_body_explain']=requestBodyExplain;
		formData['request_form_data']=requestFormData;
		formData['success_demo']=successDemo;
		formData['success_demo_explain']=successDemoExplain;
		formData['failuer_demo']=failuerDemo;
		formData['failuer_demo_explain']=failuerDemoExplain;
		formData['request_remark']=requestRemark;
		formData['interface_status']=interfaceStatus;
		formData['request_body_type']=requestBodyType;
		formData['response_headers']=responseHeaders;
		formData['visible']=visible;
		// 新曾
		formData["is_add"]=isAdd;
		formData["type"]=type;
		var pid="#(api.parent_id??)";
		if(parentId==''){
			parentId=pid;
		}
		formData["parent_id"]=parentId;
		
		var jsonText=JSON.stringify(formData);
	
		var url='#(path)#(apiActionKey)/saveApi';
		$.ajax({
	        type: 'POST',
	        url: url,
	        data:jsonText,
	        contentType:'application/json;charset=UTF-8',
			dataType:"json" ,    
	        success: function(ret){
	        	getApiTreeList(treeType);
	        	isAdd = false;
	        	showMsg(ret.msg);
	        	// 刷新文档页
	        	if(type=='api'){
	        		getDoc(id)
		        }
	        }
	    });
	}

	   // 一键生成body json参数列表
    function createBodyPara(apiId){
		var jsonText=$('#bodyJson_'+apiId).val();
		var jsonText2='#(api.request_body_explain??"{}")';
		try {
            var json=JSON.parse(jsonText);
            var json2=JSON.parse(jsonText2);
            var id='body_data_list_'+apiId;
    		$("#"+id).children('tr').remove();
    		clearRowData();
    		for (var key in json) {
    			if(typeof(json[key])=='object'){
    				loadObjectPara(json[key],key,id,json2,apiId);
    			}else{
    				addOrUpdateDataRow(id,json2,key,typeof(json[key]),apiId);
    			}
    		}
        }catch(e){
            layer.tips(e, '#formatBodyJson_'+apiId,{
                time:4000,
                tips:3
            });
        }
        
    }
    // 一键生成成功示例参数列表
    function createSuccessPara(apiId){
		var jsonText=$('#successDataJson_'+apiId).val();
		var jsonText2='#(api.success_demo_explain??"{}")';
		try {
            var json=JSON.parse(jsonText);
            var json2=JSON.parse(jsonText2);
            var id='success_data_list_'+apiId;
            $("#"+id).children('tr').remove();
            clearRowData();
    		for (var key in json) {
    			if(json[key]!=null && (typeof(json[key])=='object'||typeof(json[key])=='array')){
    				loadObjectPara(json[key],key,id,json2,apiId);
    			}else{    				
    				addOrUpdateDataRow(id,json2,key,typeof(json[key]),apiId);
    			}
    		}
        }catch(e){
            layer.tips(e, '#createSuccessPara_'+apiId,{
                time:4000,
                tips:3
            });
        }
		
    }

 	// 一键生成失败示例参数列表
    function createFailuerPara(apiId){
		var jsonText=$('#failuerDataJson_'+apiId).val();
		var jsonText2='#(api.failuer_demo_explain??"{}")';
		try {
            var json=JSON.parse(jsonText);
            var json2=JSON.parse(jsonText2);
            var id='failuer_data_list_'+apiId;
            $("#"+id).children('tr').remove();
            clearRowData();
    		for (var key in json) {
    			if(json[key]!=null && (typeof(json[key])=='object'||typeof(json[key])=='array')){
    				loadObjectPara(json[key],key,id,json2,apiId);
    			}else{
    				addOrUpdateDataRow(id,json2,key,typeof(json[key]),apiId);
    			}
    		}
        }catch(e){
            layer.tips(e, '#createFailuerPara_'+apiId,{
                time:4000,
                tips:3
            });
        }
		
    }

 // 保存为用例
	function saveDemo#(api.id??)(apiId,apiTitle){
		layer.open({  
		     btnAsync: true,  
		     title: '保存为用例',  
		     type: 1,  
		     shadeClose: true,
		     content: `  
		         <div class="layui-form layui-form-pane" style="padding:15px;">  
		             <div class="layui-form-item">  
		                 <label class="layui-form-label">用例名称</label>  
		                 <div class="layui-input-block layui-input-wrap">  
			                 <div class="layui-input-prefix layui-input-split" style="width:150px;">
			                	 <div style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">${apiTitle}</div><span style="position: absolute;right:5px;top:0px">（</span>
			               	 </div>
		                     <input style="height:38px;padding-left:160px;" type="text" name="title" oninput="titleHeader(this)" placeholder="用例名称" lay-verify="required" autocomplete="off" class="layui-input" id="titleInput" value="">  
		                     <div id="titleTip" style="color: red; display: none;position: absolute;left:15px;margin-top: -2px;">名称为必填项，请填写名称</div>  
		                     <div class="layui-input-suffix layui-input-split">）</div>
				         </div>  
		             </div>
		         </div>`,  
		 	     area: ['580px', height], 
		 	     offset:'100px',
		 	     resize:false,
		 	     delay: [10,500],// 数组成员值分别表示显示延迟时间和隐藏延迟时间
		 	     btn: ['确定', '取消'],  
		 	     btn1: function (index, layero) { 
			 	     
		 	         // 读取输入框内容  
		 	         var title = layero.find('input[name="title"]').val();  
		 	         var titleTip = layero.find('#titleTip');  

		 	         // 验证名称是否填写  
		 	         if (!title) {  
		 	             titleTip.show(); // 显示提示信息  
		 	             return false; // 阻止关闭弹出层  
		 	         } else {  
		 	             titleTip.hide(); // 隐藏提示信息  
		 	         }  

		 			// 保存为用例
			 	    saveApi#(api.id??)(apiId,title,'demo',apiId);
			       
		 	     },  
		 	     btn2: function (index) {  
		 	         layer.close(index); // 关闭弹出层  
		 	     }  
		 	});
	}

	// 保存为接口
	function saveAsApi#(api.id??)(apiId){
		layer.open({  
		     btnAsync: true,  
		     title: '保存为接口',  
		     type: 1,  
		     shadeClose: true,
		     content: `  
		         <div class="layui-form layui-form-pane" style="padding:15px;">  
		             <div class="layui-form-item layui-form-text">  
		                 <label class="layui-form-label">接口名称</label>  
		                 <div class="layui-input-block">  
		                     <input style="" type="text" name="title" oninput="titleHeader(this)" placeholder="接口名称" lay-verify="required" autocomplete="off" class="layui-input" id="titleInput" value="">  
		                     <div id="titleTip" style="color: red; display: none;position: absolute;left:15px;margin-top: -2px;">名称为必填项，请填写名称</div>  
				         </div><br/>
				         <div class="layui-form-item layui-form-text">  
			                 <label class="layui-form-label">接口目录<font color="red">*</font></label>  
			                 <div class="layui-input-block">  
			                  	<input type="hidden" id="treeSelect2Id" name="parentId" value="1"/>
			                  	<input type="text" id="treeSelect2" name="parentName" value="根目录"  class="layui-input" autocomplete="off" placeholder="根目录" onblur="searchMenuBlur(this,1)" oninput="searchMenu(this,1)"/> 
			                    <div id="parentIdTip" style="color: red; display: none;position: absolute;left:15px;margin-top: -2px;">请选择目录</div>
			   	             </div>  
			             </div>    
		             </div>
		         </div>`,  
		 	     area: ['580px', height], 
		 	     offset:'100px',
		 	     resize:false,
		 	     delay: [10,500],// 数组成员值分别表示显示延迟时间和隐藏延迟时间
		 	     btn: ['确定', '取消'],  
		 	     btn1: function (index, layero) { 
			 	     
		 	         // 读取输入框内容  
		 	         var title = layero.find('input[name="title"]').val();  
		 	         var titleTip = layero.find('#titleTip');  
					 var parentIdTip = layero.find('#parentIdTip');  
	 	             var parentId = layero.find('input[name="parentId"]').val();  
		 	         // 验证名称是否填写  
		 	         if (!title) {  
		 	             titleTip.show(); // 显示提示信息  
		 	             return false; // 阻止关闭弹出层  
		 	         } else {  
		 	             titleTip.hide(); // 隐藏提示信息  
		 	         }  
		 	         
		 	         if(!parentId){
						parentIdTip.show();
						return false;
					 }else{
						parentIdTip.hide();
					 }

		 			// 保存为接口
			 	    saveApi#(api.id??)(apiId,title,'api',parentId);
			       
		 	     },  
		 	     btn2: function (index) {  
		 	         layer.close(index); // 关闭弹出层  
		 	     }  
		 	});
		//初始化接口目录
		getMenuTree('#treeSelect2', '1');
	}

	// 收缩响应区域
    document.querySelectorAll('.resizable-row').forEach((row) => {  
    	  row.addEventListener('mousedown', (event) => {
    	    if (event.target.classList.contains('row-resize-handle')) {  
    	      row.classList.add('resizing');  
    	    }  
    	  });  

    	  row.addEventListener('mouseup', () => {  
    	    row.classList.remove('resizing');  
    	  });  
    	});

	// 监听请求body类型
	$("#body_type_#(api.id??)").change(function(){
        var opt=$("#body_type_#(api.id??)").val();
        if(opt=='json'){
            $('.body-type-json-#(api.id??)').removeClass('layui-hide');
            $('.form-data-#(api.id??)').addClass('layui-hide');
        }else{
            $('.body-type-json-#(api.id??)').addClass('layui-hide');
            $('.form-data-#(api.id??)').removeClass('layui-hide');
        }
    });

 	//展示说明信息
    $('#formatBodyJson_#(api.id??)').hover(function(){
        var index;
        var title="如果上面输入框中是标准的json字符串，则可以点击这里自动格式化（美化）"
            this.index=layer.tips(title, this,{
                tips:3, //还可配置颜色
            });
         },function(){
            layer.close(this.index);
    })

    $('#formatSuccessJson_#(api.id??)').hover(function(){
        var index;
        var title="如果下面输入框中是标准的json字符串，则可以点击这里自动格式化（美化）"
        this.index=layer.tips(title, this,{
            tips:3, //还可配置颜色
        });
    },function(){
        layer.close(this.index);
    })

    $('#formatFailuerJson_#(api.id??)').hover(function(){
        var index;
        var title="如果下面输入框中是标准的json字符串，则可以点击这里自动格式化（美化）"
        this.index=layer.tips(title, this,{
            tips:3, //还可配置颜色
        });
    },function(){
        layer.close(this.index);
    })

    $('#createJsonPara_#(api.id??)').hover(function(){
        var index;
        var title="如果上面面输入框中是标准的json字符串，则可以点击这里自动生成字段说明";
        this.index=layer.tips(title, this,{
            tips:3,
        });
        },function(){
            layer.close(this.index);
    })

    $('#createSuccessPara_#(api.id??)').hover(function(){
        var index;
        var title="如果上面面输入框中是标准的json字符串，则可以点击这里自动生成参数行";
        this.index=layer.tips(title, this,{
            tips:3,
        });
    },function(){
        layer.close(this.index);
    })

    $('#createFailuerPara_#(api.id??)').hover(function(){
        var index;
        var title="如果上面面输入框中是标准的json字符串，则可以点击这里自动生成参数行";
        this.index=layer.tips(title, this,{
            tips:3,
        });
    },function(){
        layer.close(this.index);
    })

    $('#copyCode_#(api.id??)').hover(function(){
        var index;
        var title="从现有响应体快速复制到这里";
        this.index=layer.tips(title, this,{
            tips:3,
        });
    },function(){
        layer.close(this.index);
    })

    $('#copyFailuerCode_#(api.id??)').hover(function(){
        var index;
        var title="从现有响应体快速复制到这里";
        this.index=layer.tips(title, this,{
            tips:3,
        });
    },function(){
        layer.close(this.index);
    })

    $('#removeSuccessPara_#(api.id??)').hover(function(){
        var index;
        var title="把下面的返回参数说明一键清空";
        this.index=layer.tips(title, this,{
            tips:3,
        });
    },function(){
        layer.close(this.index);
    })

    $('#removeFailuerPara_#(api.id??)').hover(function(){
        var index;
        var title="把下面的返回参数说明一键清空";
        this.index=layer.tips(title, this,{
            tips:3,
        });
    },function(){
        layer.close(this.index);
    });

        
	layui.util.on('lay-on', {
    	'save-api-#(api.id??)': function(){
        	var content =`<a style="color:white;" onclick="saveDemo#(api.id??)('#(api.id??)','#(api.title??)')">保存为用例</a>`;
		      layer.tips(content, this, {
		        tips: [3,'#16baaa'],
		        scrollbar:false
		      });
    	},
    	'save-link-#(api.id??)': function(){
        	var content =`<a style="color:white;" onclick="saveAsApi#(api.id??)('#(api.id??)')">保存为接口</a>`;
		      layer.tips(content, this, {
		        tips: [3,'#16baaa'],
		        scrollbar:false
		      });
		      
    	},
	    'delete-#(api.id??)': function(){
	    	var content =`<a style="color:white;" onclick="del('#(api.id??)','#(api.tree_type??)')">删除</a>`;
	    	layer.tips(content, this, {
		        tips: [3,'#16baaa'],
		        scrollbar:false
		      });
	    },
  	});

  	// 请求地址监听
	function requestUrlHeader(_this,apiId){
		var title=$(_this).val();
		if(title)
			$('#requestUrl_tips_'+apiId).hide();
		else
			$('#requestUrl_tips_'+apiId).show();
	}

	// 接口标题监听
	function titleInputHeader(_this,apiId){
		var title=$(_this).val();
		if(title)
			$('#title_input_tips_'+apiId).hide();
		else
			$('#title_input_tips_'+apiId).show();
	}

	function setActive(selectedTab,index,apiId) {  
	    // 获取所有的响应标签  
	    const tabs = document.querySelectorAll('.response-tab-'+apiId);  
	    
	    // 移除所有标签的 active 样式  
	    tabs.forEach((tab) => {  
	        tab.classList.remove('response-this');  
	    });  

	    // 给选中的标签添加 active 样式  
	    selectedTab.classList.add('response-this');  

	    const tabsContent = document.querySelectorAll('.response-tab-content-'+apiId);  
	 	// 移除所有标签的 active 样式  
	    tabsContent.forEach((content) => {  
	    	content.classList.remove('respones-tab-show');  
	    });  
	    
	    $('#respones_content_'+index+'_'+apiId).addClass('respones-tab-show');
	}  
</script>